<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*过渡前*/
        /*过渡属性应写在没有触发该元素之前*/
        
        .d1 {
            width: 100px;
            height: 100px;
            background-color: red;
            /**********需要过渡的属性，全部过渡all*****/
            transition-property: width;
            /***************过渡的时间************/
            transition-duration: 5s;
            /***************过渡方式***************/
            /*默认值，先慢再快最后慢
            transition-timing-function: ease;*/
            /*先慢，后越来越快
            transition-timing-function: ease-in; */
            /*速度在开始和结束时都很慢,中间不加速
            transition-timing-function: ease-in-out;*/
            /*先快，后越来越慢
            transition-timing-function: ease-out;*/
            /*匀速*/
            transition-timing-function: linear;
            /*************过渡延迟时间***********/
            transition-delay: 1s;
            /***********简写(执行时间  延迟时间 过渡方式 过度属性)******/
            transition: 1s 0s linear all;
        }
        /*过渡后*/
        
        .d1:hover {
            cursor: pointer;
            width: 600px;
            height: 200px;
            background-color: bisque;
        }
        
        .d2 {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: 1s 1s linear all;
        }
        
        .d2:hover {
            cursor: pointer;
            border-radius: 50%;
            background-color: yellowgreen;
        }
        
        .d3 {
            width: 200px;
            height: 200px;
            background-color: tomato;
            transition: 1s 0s linear all;
        }
        
        .d3:hover {
            box-shadow: 15px 15px slategray;
        }
        /*分开变形*/
        
        .d4 {
            width: 100px;
            height: 100px;
            background-color: red;
            /***********简写(执行时间  延迟时间 过渡方式 过度属性)******/
            transition: 1s 0s linear width, 1s 1s linear height, 1s 2s linear background-color;
        }
        /*过渡后*/
        
        .d4:hover {
            cursor: pointer;
            width: 600px;
            height: 200px;
            background-color: bisque;
        }
    </style>
</head>

<body>
    <div class="d1"></div>
    <br>
    <hr>
    <div class="d2"></div>
    <br>
    <hr>
    <div class="d3"></div>
    <br>
    <hr>
    <div class="d4"></div>
</body>

</html>